<!--
*** Created by zhumin on 2020/11/12.***
*** Description: "垂直菜单，可内嵌子菜单（有二级子菜单）"
-->
<template>
  <el-menu
    mode="vertical"
    class="el-menu-vertical-demo"
    :default-active="currentActive"
    @select="menuSelected"
    :unique-opened="true"
    :router="true"
  >
    <el-menu-item-group>
      <template v-for="(item, index) in menus">
        <!-- 标题 -->
        <template v-if="item.children !== undefined">
          <el-submenu :key="index" :index="item.path">
            <template slot="title">
              <span :class="['dqicon', 'item-icon', item.style]"></span>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="(t, i) in item.children" :index="t.path" :key="i">
              {{ t.title }}
            </el-menu-item>
          </el-submenu>
        </template>
        <!-- 选项 -->
        <template v-else>
          <el-menu-item :key="index" :index="item.path">
            <span :class="['dqicon', 'item-icon', item.style]"></span>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu-item-group>
  </el-menu>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'siderBar',
  data() {
    return {
      currentActive: ''
    }
  },
  computed: {
    ...mapState({
      version: state => state.overview.version,
      licenseStatus: state => state.overview.licenseStatus
    })
  },
  props: {
    menus: {
      type: Array,
      default: function() {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    menuSelected(index) {
      // this.currentActive = index
      // this.$router.push(index)
      if (index === '/screen') {
        if (process.env.NODE_ENV === 'local') {
          window.open(window.location.origin + process.env.VUE_APP_SCREEN_URL)
        } else if (process.env.NODE_ENV === 'development') {
          window.open(window.location.origin + '/iot-web-center/screen')
        } else {
          window.open(process.env.VUE_APP_ECLOUD_PATH + '/iot-web-center/screen')
        }
      }
    },
    changeCurrentActive(currentPath) {
      let navMenu = {}
      this.menus.forEach(item => {
        if (item.children !== undefined) {
          //处理有二级菜单的情况
          item.children.forEach(t => {
            if (currentPath.includes(t.path)) {
              navMenu = t
              return
            }
          })
        } else {
          if (currentPath.includes(item.path)) {
            navMenu = item
            return
          }
        }
      })
      if (JSON.stringify(navMenu) === '{}') {
        this.currentActive = this.url
      } else {
        this.currentActive = navMenu.path
      }
    }
  },
  mounted() {
    this.changeCurrentActive(this.$route.path)
  },
  watch: {
    $route(to) {
      if (this.currentActive !== to.path) {
        this.changeCurrentActive(to.path)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content-text {
  width: 780px;
  line-height: 18px;
}
</style>
<style lang="scss">
.el-submenu__title {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  color: rgb(255, 255, 255);
  padding-left: 30px !important;
}
.el-submenu .el-menu-item {
  height: 40px;
  line-height: 40px;
  text-indent: 25px;
}
li.el-menu-item {
  line-height: 54px;
}
.el-submenu__icon-arrow {
  margin-top: -5px !important;
}
.el-submenu [class^='el-icon-'] {
  font-size: 13px;
}
.el-submenu__icon-arrow:before {
  content: '\e790';
}
.item-icon {
  margin-right: 10px;
}
</style>
